﻿
@{
    ViewBag.Title = "Buying_Tickets";
    Layout = "~/Views/Shared/CinemaLayoutPage.cshtml";
}
@using Cinema_Ticketing_System.Models;
@section styles{
    <style>
        #center img {
            width: 30px;
            height: 30px;
        }

        #div1 {
            background-color: gray;
            height: 30px;
        }

        #div2 {
            margin: 5px;
        }
        #btn{
            margin:auto;
            background-color:orange;
        }
    </style>
}



<from class="form-horizontal">
    <div class="col-lg-12" id="main">
        <div id="main2" class="col-lg-8">点击座位图选择座位：<img src="" />可选<img src="" />已选<img src="" />已售</div>
        <div class="col-lg-4">每笔订单最多购买四张影票</div>
        <div>
            <select name="time" class="form-control" id="time">
                <option value="-99">--请选择--</option>
                @foreach (var item in ViewBag.listplaytime as List<play_table>)
                {
                    <option value="@item.playid">@item.playtime</option>
                }
            </select>
        </div>
    </div>
    <div class="col-lg-12 col-lg-offset-2">
        <div class="col-lg-6" id="center">
            <div id="div1"></div>
            <div class="col-lg-8 col-lg-offset-2">
                @foreach (var item in ViewBag.listname as List<cinema_table>)
                {
                    for (var i = 0; i < item.maxcapacity; i++)
                    {
                        <div class="col-lg-2" id="div2"><img src="~/imgs/11051491.jpg" /></div>
                    }
                    break;
                }
            </div>
            <div class="col-lg-12" id="text"></div>
            <div class="col-lg-12" ><div id="btn">确定购买</div></div>
        </div>
    </div>
</from>

@section scripts
{
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
        $(function () {
            var num = 0;
            var sum = 4 - num;
            $("#text").text("您还可以选个" + sum + "座位,点击上方座位图选择座位，再次点击取消")
            $("#div2>img").click(function (e) {
                $("#text").text("您还可以选个" +sum+ "座位,点击上方座位图选择座位，再次点击取消")
                if ($(e.target).attr('src') == "/imgs/11051491.jpg") {
                    if (num < 4) {
                        $(e.target).attr("src", "/imgs/11120641.jpg");
                        num = num + 1;
                    }
                    else {
                        alert("一个订单最多可选四个位置");
                    }
                }
                else {
                    $(e.target).attr("src", "/imgs/11051491.jpg");
                    num = num - 1;
                }
            })

            
        })

    </script>

}